/* 
* @Author: Turbidsoul Chen
* @Date:   2016-11-28 15:52:46
* @Last Modified by:   Turbidsoul
* @Last Modified time: 2017-01-14 23:22:21
*/

import React, { Component } from 'react';
import {ListItem, Icon, UCheck, Badge} from 'amazeui-react';
import {inject} from 'mobx-react';

@inject('todoStore')
export default class TodoItem extends Component {
  static propTypes = {
    todo: React.PropTypes.object.isRequired,
    todoStore: React.PropTypes.object.isRequired,
    index: React.PropTypes.number.isRequired
  };
  state = {
    hover: false
  };
  onToggleCompleted() {
    this.props.todoStore.toggleCompleted(this.props.index);
  }
  onRename() {
    this.props.todo.task = prompt('Task name', this.props.todo.task) || this.props.todo.task;
  }
  onHover(e) {
    e.preventDefault();
    let hover = !this.state.hover;
    this.setState({hover});
  }
  onRemove(e) {
    e.preventDefault();
    this.props.todoStore.removeTodo(this.props.index);
  }
  render() {
    let todo = this.props.todo;
    return (
      <ListItem
        onDoubleClick={::this.onRename}
        onMouseEnter={::this.onHover}
        onMouseLeave={::this.onHover}>
        {this.state.hover?<Badge round amStyle="danger" style={{marginTop: '4px'}} onClick={::this.onRemove}><Icon icon="trash"/></Badge>:null}
        <UCheck
          inline
          type="checkbox"
          label={todo.completed?<s>{this.props.todo.task}</s>:this.props.todo.task}
          checked={this.props.todo.completed}
          onChange={::this.onToggleCompleted}/>
        {this.props.todo.assignee ? <small>{this.props.todo.assignee.name}</small> : null}
      </ListItem>
    );
  }
}
